<style lang="scss" scoped>
@import '../../css/resource.scss';
.el-form-item{margin-bottom: 30px;}
.main-content{background: #fff;padding: 40px 0 80px 0;}
.word-dialog-tap{padding: 8px 0 0 0;text-align: center;}
.dialog-btn-left{width: 150px;margin: 0 10px 0 -4px;}
.dialog-btn-right{width: 150px;}

.res-btn{
    display: inline-block;
    padding: 0 10px;
    background: #fbfbfb;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.cover-box{display: inline-block; vertical-align: top; overflow: hidden;}

</style>
<template>
    <section class="add-resource">

        <div class="main-content">
            <el-form  :model="form" :rules="rules" ref="form" label-width="180px">
                <el-form-item label="目录名称" prop="Title" >
                    <el-input class="input" v-model="form.Title" placeholder="请输入目录名称" maxlength="50"></el-input>
                </el-form-item>
                <el-form-item label="文件">
                    <div v-show="form.FileName==''" id="container">
                        <div id="selectfiles" class="cover-box">
                            <el-button size="small" type="primary" disabled v-if=" !!uploadingFlag">{{ '上传中'+progress+'%' }}</el-button>
                            <el-button size="small" type="primary" v-else> 点击上传 </el-button>
                        </div>
                    </div>
                    <span class="res-btn" v-if="form.FileName!=''">{{form.FileName}}<i class="el-icon-close" @click="delRes"></i></span>
                    <div style="font-size:12px; color:#666; line-height:1.5; margin-top:10px;">点击上传音频或视频文件，音频支持mp3格式，视频支持mp4格式</div>
                </el-form-item>
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="内容" prop="remark" >
                            <editor  :content="inputContent" v-model="form.Content" maxlength="5000"></editor>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button class="dialog-btn-right" type="primary" @click="submitForm('form')" v-if="!btnState">保存</el-button>
                    <el-button type="primary" disabled v-else>保存</el-button>
                    <!-- <a href="#" class="dialog-btn-right" title="" v-else>保存1</a> -->
                    <!-- <el-button class="dialog-btn-right" @click="submitForm('form',1)">保存并继续上传</el-button> -->
                </el-form-item>
            </el-form>
        </div>
    </section>
</template>

<script>

import qs from 'qs'
import editor from 'components/wangeditor.vue'
import aliyun from 'js/aliyun'

export default{
    data: function(){
        return {
            uploadingFlag:false,
            progress:0,
            form:{
                Title:'',
                Content:'',
                FileName:'',
                ResObject:''
            },
            inputContent:'',
            dialogLittle:{
                centerDialogVisible: false,
                title:'',
                placeholder:''
            },
            comResID: '',
            tabName: '',
            btnState:false,
            ComContentID:'', //资源id
            rules: {
                Title: [
                    { required: true, message: '请输入目录名称', trigger: 'blur' },
                ]
            },

            path: [
                {
                    'name':'资源管理',
                    'path':'/resource/book-list'
                },
                {
                    'name':'我的资源',
                    'path':'/resource/my-resource'
                },
                {
                    'name': this.$route.query.TabName ||'',
                    'path': `/resource/upload-info?TabName=${this.$route.query.TabName}&ComResID=${this.$route.query.ComResID}`
                },
                {
                    'name': '上传'
                }
            ]

        }
    },
    methods: {
        gotoBackPage(){
            this.$router.push({name:'resourceMyResource',query:{TabName:this.tabName}})
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.form.ResObject==''&&this.form.Content==''){
                        this.$message.error('文件和内容至少需要填一项')
                        return
                    } else if( this.form.Content.length > 5000) {
                        this.$message.error('内容字符长度不能大于5000')
                        return
                    }

                    !this.comContentID ? this.addFrom() : this.editFrom()

                } else {
                    return false;
                }
            });
        },

        addFrom() {
            axios.post('/com/com-res/addContent', qs.stringify({
                comResID: this.comResID,
                title:this.form.Title,
                resObject:this.form.ResObject,
                fileType:this.form.FileName.split('.')[this.form.FileName.split('.').length-1],
                content:this.form.Content,
                fileName: this.form.FileName
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$router.push({name:'resourceUploadInfo',query:{ComResID:this.comResID,TabName:this.tabName}})
                }else {
                    this.$message.error(d.msg)
                }
            });
        },

        delRes(){

            axios.post('/api/system/delFile', qs.stringify({
                filename:this.form.ResObject
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.form.FileName = '';
                    this.form.resObject = ''
                }else {
                    this.$message.error(d.msg)
                }
            })
        },


        editFrom() {
            axios.post('/com/com-res/comContentEdit', qs.stringify({
                comContentID: this.comContentID,
                title:this.form.Title,
                resObject:this.form.ResObject,
                fileType:this.form.FileName.split('.')[this.form.FileName.split('.').length-1],
                content:this.form.Content,
                fileName: this.form.FileName
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$router.push({name:'resourceUploadInfo',query:{ComResID:this.comResID,TabName:this.tabName}})
                }else {
                    this.$message.error(d.msg)
                }
            });
        },

        getFrom() {
            axios.post('/com/com-res/contentDetail', qs.stringify({
                comContentID: this.comContentID,
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                   this.form = d.data
                   this.inputContent = d.data.Content
                }else {
                    this.$message.error(d.msg)
                }
            });
        }
    },


    mounted: function(){
        this.$store.commit('setPath', this.path)

        this.comResID = this.$route.query.ComResID
        this.tabName = this.$route.query.TabName || '目录名称'

        if( !!this.$route.query.comContentID ) {
            this.comContentID = this.$route.query.comContentID
            this.getFrom()
        }

        var self = this;
        var uploader = aliyun({
            selectfiles:'selectfiles',      //选择文件元素ID
            container:'container',          //选择元素盒子ID
            platSign:'com',                 //上传平台参数，管理后台传admin,公司管理平台com,小程序端wxapp
            fileTypeFilter:{                //过滤文件类型及大小控制
                 mime_types : [ //只允许上传音频和视频文件及对应以下格式
                     { title : "Audio files", extensions : "mp3" },
                     { title : "Video files", extensions : "mp4" }
                 ]
            },
            getUploadIngFlag(uploadingFlag, rate) {
                self.uploadingFlag = uploadingFlag
                self.progress = rate
                self.btnState = true
            },
            getFileInfo(keyArr,fileName) {
                self.form.ResObject = keyArr[0];
                self.form.FileName = fileName;
                self.uploadingFlag = false;
                self.btnState = false
            },

            getCompletionUrl(key) {

            }
        });
        uploader.init();

    },
    components: {
        editor: editor
    },
    directives: {
        focus: {
            update: function (el) {
                el.focus()
            }
        }
    },
}


</script>
